div {
    max-width: 30em;
    min-height: 5em;
    color: #fff;
    padding: 2em;
    margin: 2em;
}

.div1 {
    background: linear-gradient(#38a, #97a)
}

.div2 {
    background: linear-gradient(#38a 50%, #97a 0);
    background-size: 100% 15px;
}

.div3 {
    background: linear-gradient(#38a 33.33%, #3829 0, #3829 66.66%, #97a 0);
    background-size: 100% 35px;
}

.div4 {
    background: linear-gradient(90deg, #38a 33.33%, #3829 0, #3829 66.66%, #97a 0);
    background-size: 35px 100%;
}

.div5 {
    background: repeating-linear-gradient(90deg, #38a, #38a 15px, #3829 0, #3829 30px);
}

.div6 {
    background: repeating-linear-gradient(45deg, #38a, #38a 15px, #3829 0, #3829 30px);
}

.div7 {
    background: #38a;
    background-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px);
}